import React from 'react'
import {Table, Breadcrumb, Message, Loading, FormItem, Form, Button, Input} from '@hi-ui/hiui/es'
import {getCategoryList} from '../action/index'
import '../layer.css'


class Category extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            current: 1,
            pageSize: 10,
            key:'',
            total: 0,
            showLoading: false

        }
    }

    columns = [
        {title: '标识号', dataKey: 'id', width: 120, key: '1'},
        {title: '分类名称', dataKey: 'categoryName', width: 120, key: '2'},
        {title: '到访频率', dataKey: 'frequency', width: 120, key: '3'}
    ]

    breadCrumbs = [
        {content: '用户数据', path: ''},
        {content: '分类类型', path: ''}
    ]

    async componentDidMount() {
        await this.loadCategoryList()
    }

    loadCategoryList(current = this.state.current, pageSize = this.state.pageSize, key = this.state.key) {
        this.setState({
            showLoading: true
        })
        getCategoryList({pageNum: current, pageSize: pageSize, key: key}).then(res => {
            if (res.code === 200) {
                this.setState({
                    list: res.data.records,
                    current: res.data.current,
                    total: res.data.total
                })
            } else {
                Message.open({
                    type: 'warning',
                    title: res.message
                })
            }
        }).finally((err) => {
            this.setState({
                showLoading: false
            })
        })


    }


    render() {
        return (
            <div className={'bodycontent'}>
                <Breadcrumb data={this.breadCrumbs} onClick={(path) => {
                    console.log('go path: ', path)
                }}/>
                <div className={'bodycard'}>
                    <Form placement='horizontal' labelPlacement='right'>
                        <FormItem>
                            <Input placeholder='请输入' clearable={true} value={this.state.key} onChange={(e,val) => {
                                this.setState({
                                    key: val
                                })
                            }}/>
                        </FormItem>
                        <FormItem>
                            <Button type='line' onClick={()=>{
                                this.loadCategoryList()
                            }}>查询</Button>
                        </FormItem>
                    </Form>
                    <Loading content={'loading...'} visible={this.state.showLoading}>
                        <Table columns={this.columns} data={this.state.list} pagination={{
                            pageSize: this.state.pageSize,
                            total: this.state.total,
                            current: this.state.current,
                            pageSizeOptions: [10, 20, 50],
                            showTotal: true,
                            onPageSizeChange: (val, current) => {
                                this.setState({
                                    current: current,
                                    pageSize: val
                                })
                                this.loadCategoryList(current, val)
                            },
                            onChange: (page, pre, size) => {
                                console.log(page, pre, size)
                                this.setState({
                                    current: page,
                                    pageSize: size
                                })
                                this.loadCategoryList(page, size)
                            }
                        }}/>
                    </Loading>
                </div>
            </div>
        )
    }
}

export default Category
